<template>
	<div
		ref="slideBtn"
		class="slideBtn"
		:class="{
			showLeft: isShowMenu,
			hideLeft: !isShowMenu
		}"
		@click="showMenuLeft"
	>
		<caret-left v-if="isShowMenu" size="13" />
		<caret-right v-if="!isShowMenu" size="13" />
	</div>
</template>
<script setup name="SlideBtn">
	import { onMounted } from 'vue'
	const emit = defineEmits(['emitMenu', 'init'])
	const cachePrefix = __APP_ENV__.VITE_CACHE_PREFIX
	const cacheName = cachePrefix + '_' + 'SLIDE_BTN'
	const props = defineProps({
		idLayoutMenu: {
			type: String,
			default: () => ''
		},
		idLeftMenu: {
			type: String,
			default: () => ''
		}
	})
	let glMenuState = ref(undefined)
	let slideBtn = ref()
	let isShowMenu = ref(true)
	let initSlideBtn = () => {
		const layoutMenu = document.querySelectorAll(props.idLayoutMenu)[0]
		const leftMenu = document.querySelectorAll(props.idLeftMenu)[0]
		const _glMenuState = window.localStorage.getItem(cacheName)
		if (_glMenuState == null || _glMenuState == undefined || _glMenuState == '') {
			glMenuState.value = {
				isShowMenu: true,
				showleft: layoutMenu.clientWidth + leftMenu.clientWidth,
				hideleft: layoutMenu.clientWidth,
				selfWidth: slideBtn.value.clientWidth
			}
			window.localStorage.setItem(cacheName, JSON.stringify(glMenuState.value))
		} else {
			glMenuState.value = JSON.parse(window.localStorage.getItem(cacheName))
		}
		isShowMenu.value = glMenuState.value.isShowMenu
		if (isShowMenu.value) {
			slideBtn.value.style.left = glMenuState.value.showleft - glMenuState.value.selfWidth + 'px'
		} else {
			slideBtn.value.style.left = glMenuState.value.hideleft + 'px'
		}
		emit('init', isShowMenu.value)
	}
	let showMenuLeft = () => {
		const leftMenu = document.querySelectorAll(props.idLayoutMenu)[0]
		const showleft = glMenuState.value.showleft
		const hideleft = glMenuState.value.hideleft
		const selfWidth = glMenuState.value.selfWidth
		isShowMenu.value = !isShowMenu.value
		if (isShowMenu.value) {
			slideBtn.value.style.left = showleft - selfWidth + 'px'
		} else {
			slideBtn.value.style.left = hideleft + 'px'
		}
		glMenuState.value.isShowMenu = isShowMenu.value
		window.localStorage.setItem(cacheName, JSON.stringify(glMenuState.value))
		emit('emitMenu', isShowMenu.value)
	}
	onMounted(() => {
		initSlideBtn()
	})
</script>
<style scoped lang="less">
	.slideBtn {
		opacity: 0.5;
		z-index: 9;
		cursor: pointer;
		position: fixed;
		top: 48%;
		font-size: 12px;
		padding: 24px 0px;
		background: #ebebeb;
		color: #767b81;
		width: 14px !important;
		height: 70px !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&:hover {
			opacity: 1;
		}
		&.showLeft {
			border: 1px solid #a8afb7;
			border-radius: 6px;
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
			border-right: none;
		}
		&.hideLeft {
			border: 1px solid #a8afb7;
			border-radius: 6px;
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
			border-left: none;
		}
	}
</style>
